<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>政策咨询会员服务线上报名---》基本信息</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min(1).css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/surfaceSignup.css">
</head>

<body>
    <header>
        <div class="head">
            <div class="heads">
                <p class="heads-left">·欢迎来到河南省内部审计协会官网·</p>
                <p class="heads-right">
                    <a href="">注册 |</a>
                    <a href="">登陆</a>
                </p>
            </div>
        </div>
        <div class="head-miiddle">
            <img src="../images/组 44.png" alt="">
            <div class="miiddle">
                <input type="text" value="" placeholder="">
                <span>搜索</span>
            </div>
            <img src="../images/NoPath - 副本 (12).png" alt="">
        </div>
        <div class="daohang">
            <a href="">首页</a>
            <div class="gaikuang">
                <div>协会概况</div>
                <div class="xiehui">
                    <a href="">协会简介</a>
                    <a href="">协会章程</a>
                    <a href="">协会领导</a>
                    <a href="">协会机构</a>
                    <a href="">联系方式</a>
                </div>
            </div>
            <div class="gaikuang">
                <div>职业教育</div>
                <div class="xiehui">
                    <a href="">面授培训</a>
                    <a href="">网络培训</a>
                    <a href="">资格考试</a>
                    <a href="">线上报名</a>
                    <a href="">师资库</a>
                </div>
            </div>
            <div class="gaikuang">
                <div>会员服务</div>
                <div class="xiehui">
                    <a href="">入会申请</a>
                    <a href="">会员记录</a>
                </div>
            </div>
            <div class="gaikuang">
                <div>政策咨询</div>
                <div class="xiehui">
                    <a href="">政策法规</a>
                    <a href="">行业动态</a>
                    <a href="">通知公告</a>
                </div>
            </div>
            <div class="gaikuang">
                <div>内审之家</div>
                <div class="xiehui">
                    <a href="">内审通报</a>
                    <a href="">光荣榜</a>
                    <a href="">企业名录</a>
                </div>
            </div>
            <div class="gaikuang">
                <div>文化交流</div>
                <div class="xiehui">
                    <a href="">对外交流</a>
                    <a href="">文化建设</a>
                </div>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <p>当先位置：</p>
            <a href="">首页></a>
            <a href="">会员服务></a>
            <a href="">线上报名></a>
            <a href="">报名信息</a>
        </div>
        <div class="surface">
            基本信息
        </div>
        <form action="">
            <div class="surfaceZong">
                <div class="surfaceOne">
                    <span>*姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*姓名拼音:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
                    <input name="nan" type="radio">
                    <span>男</span>
                    <input name="nan" type="radio">
                    <span>女</span>
                </div>

                <div class="surfaceOne">
                    <span>*出生年月:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*住宿形式:</span>
                    <input name="nan" type="radio">
                    <span>单住</span>
                    <input name="nan" type="radio">
                    <span>统一</span>
                </div>
                <div class="surfaceOne">
                    <span>*身份证号:</span>
                    <input type="text">
                </div>
                <div class="surfacefour">
                    <span>&nbsp;办公电话:</span>
                    <input type="text">
                </div>
                <div class="surfacefours">
                    <span>*手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*电子邮箱:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*单位名称:</span>
                    <input type="text">
                </div>
                <div class="surfaceOne">
                    <span>*现任职务:</span>
                    <input type="text">
                </div>
                <div class="surfacefive">
                    <span>*通讯地址:</span>
                    <input type="text">
                </div>
                <div class="surfacefours">
                    <span>*邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编:</span>
                    <input type="text">
                </div>

                <!-- 选项卡 -->
                <div class="tab">
                    <span>*发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;票:</span>
                    <div class="tables">
                        <div class="ta">
                            <input name="nan" id="nan" type="radio" checked>
                            <label for="nan">增值税普通发票</label>
                        </div>

                        <div class="ta">
                            <input name="nan" id="na" type="radio">
                            <label for="na">增值税专用发票</label>
                        </div>

                    </div>
                </div>
                <div class="table">
                    <div class="table1">
                        <div class="surfacefives">
                            <span>*发票单位名称:</span>
                            <input type="text">
                        </div>

                        <div class="surfacefivesa">
                            <span>*纳税人识别或者统一社会信用代码:</span>
                            <input type="text">
                        </div>

                        <div class="surfacefivesa">
                            <span>*备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesb">
                            <span>*培训费用:</span>
                            <span>￥1234</span>
                        </div>
                        <div class="surfacefivesc">
                            <span>*验证码:</span>
                            <input type="text">
                            <div class="surfacefivesd">

                                <img src="../images/54.png" alt="">
                            </div>
                            <a href="">换一张</a>
                        </div>
                    </div>
                    <div class="table1">
                        <div class="surfacefives">
                            <span>*发票单位名称:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*注册地址:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*纳税人识别或者统一社会信用代码:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*注册电话:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*开&nbsp;&nbsp;户&nbsp;&nbsp;行:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*银行账号:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesa">
                            <span>*备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</span>
                            <input type="text">
                        </div>
                        <div class="surfacefivesb">
                            <span>*培训费用:</span>
                            <span>￥1234</span>
                        </div>
                        <div class="surfacefivesc">
                            <span>*验证码:</span>
                            <input type="text">
                            <div class="surfacefivesd">

                                <img src="../images/54.png" alt="">
                            </div>
                            <a href="">换一张</a>
                        </div>
                    </div>

                </div>



        </form>
        <div class="chec">
            <input type="checkbox">
            <p>本人承认《中国内部审计协会章程》，申请加入中国内部审计协会成为个人会员，保证所填信息真是准确，如与事实不符由本人承担一切后果</p>
        </div>
        <div class="bu">
            <button>提交信息</button>
        </div>
        <div class="null">

        </div>
    </section>
    <!-- 底部 -->
    <footer>
        <div class="ends">
            <p>河南省内部审计协会 版权所有</p>
            <p>协会地址：埃里克技术大反复将发放1将发放卡萨费尽全力</p>
            <p>联系电话：18240701988 电子邮箱：860258541@123.com</p>
            <p>copy@2018.ALL righrs reserved</p>
        </div>
    </footer>
    <div class="nulll"></div>
    <!-- 底部结束 -->


    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        //当点击a标签的选项卡的时候，执行下面的函数
        $('.tables .ta').click(function() {
            // 获取点击标签的索引
            var $index = $(this).index();
            console.log($index)
                //本标签获取索引，进行展示，只显示本标签其他隐藏
            $('.table1 ').eq($index).show().siblings().hide();
        })
    </script>
    <script>
        // 鼠标移入时，显示暗红。隐藏下拉框
        $(".gaikuang").mouseover(function() {
            $(this).css("background-color", "#812323")
            $(".xiehui").eq($(this).index() - 1).show();
        });
        // 鼠标移出后，显示红色（和背景色是一个颜色），展示下拉框
        $(".gaikuang").mouseout(function() {
            $(this).css("background-color", "#d80505")
            $(".xiehui").hide();
        });
    </script>
</body>

</html>